import { useEffect, useState } from "react";

function Hooks(){
    let mytime = new Date().toLocaleTimeString();
    let [time,setTime] = useState(mytime);
    // 当useEffect 执行函数得返回值为一个函数时,那么组件再卸载时执行该返回值函数
    useEffect(()=>{
        console.log("组件渲染后")
        let timer = setInterval(()=>{
            console.log(1111)
            setTime(new Date().toLocaleTimeString())
        },1000)
        return ()=>{
            console.log("组件卸载时执行")
            clearInterval(timer)
        }
    },[])
    return (
        <div>
            <h1>useEffect模拟组件卸载</h1>
            <h2>{time}</h2>
        </div>
    )
}

/* 
useEffect 特点: 描述了react函数式组件生命周期(dom操作 发送请求 更新状态)
1. 参数一为执行函数 参数二为依赖项
2. 当参数二为空数组时则执行函数只会初始化执行一次,当参数二有依赖项时则依赖项发生改变执行函数就是执行一次
3. 执行函数可以返回一个函数当组件卸载时触发该函数
*/
export default Hooks;